// 创建匿名执行性函数，规定我们自己的代码作用域
// 第一步：复选框的关联操作
(function () {
    const checkAll = document.getElementById("checkAll");
    const tbody = document.getElementsByTagName("tbody")[0];
    const checkOneList = tbody.getElementsByTagName("input");
    const ths = document.getElementsByTagName("th");
    const rows = tbody.getElementsByTagName("tr");

    // 程序入口的定义
    let init = function () {
        initEvent();
    }

    // 所有的事件函数都在这里面绑定
    let initEvent = function () {
        checkAll.addEventListener('click', onCheckAllClick);
        tbody.addEventListener('click', onCheckOneListClick);
        for (let i = 0; i < ths.length; i++) {
            handleThsClickFn(ths[i], i)
        }
    }

    // 全选按钮事件绑定函数
    let onCheckAllClick = function () {
        // 获取dom节点的选中状态
        let checkStatus = this.checked
        for (let i = 0; i < checkOneList.length; i++) {
            checkOneList[i].checked = checkStatus;
        }
        // console.log(checkStatus)
    }

    // 定义tbody里面的复选框
    let onCheckOneListClick = function (e) {
        //  事件目标的获取，准确找到input复选框进行事件触发

        if (e.target.tagName !== 'INPUT') return
        let checkNumber = 0;
        for (let i = 0; i < checkOneList.length; i++) {
            // console.log(checkOneList[i].checked)
            checkOneList[i].checked && checkNumber++;
        }
        checkAll.checked = (checkNumber === checkOneList.length);
    }

    // 定义th的点击事件
    let handleThsClickFn = function (th, index) {
        if (index === 0) return;
        th.addEventListener('click', function () {
            let arr = Array.prototype.slice.call(rows).sort((a, b) => {
                if (index === 2 || index === 4) {
                    // 中文处理
                    return a.getElementsByTagName('td')[index].innerHTML.localeCompare(b.getElementsByTagName('td')[index].innerHTML, 'zh');
                } else {
                    return a.getElementsByTagName('td')[index].innerHTML - b.getElementsByTagName('td')[index].innerHTML;
                }

            })
            // 循环已经排序完成的数据，进行一个复制的操作
            for (let i = 0; i < arr.length; i++) {
                // 会将已经有的dom移动到容器的最后
                tbody.appendChild(arr[i]);
            }
            // console.log(arr)
        })
    }



    init();  // 程序入口的调用
})()